<template>
	<wsPage title="退款/货单">
		<div slot="page_operate">
			<Button type="ghost" @click="refresh"><Icon type="refresh"></Icon><span>刷新</span></Button>
		</div>
		<Row class="tab-demo">
			<Col span="24">
				<Button :type="activeIndex == 0 ? 'primary' : 'ghost'" @click="queryByStatus()">全部</Button>
				<Button :type="activeIndex == 1 ? 'primary' : 'ghost'" @click="queryByStatus(1)">待处理</Button>
				<Button :type="activeIndex == 2 ? 'primary' : 'ghost'" @click="queryByStatus(2)">已处理</Button>
				<Button :type="activeIndex == 3 ? 'primary' : 'ghost'" @click="queryByStatus(3)">已拒绝</Button>
			</Col>
		</Row>
		<wsSmPanel :page="table.page" @simple-query="query" @page-change="query">
			<div slot="query_form">
				<Form :model="queryForm" :label-width="100" inline>
					<FormItem label="退款类型">
							<Select clearable v-model="queryForm.refundType" placeholder="请选择" class="ws-form-select">
									<Option value="1">退款</Option>
									<Option value="2">退货</Option>
							</Select>
					</FormItem>
					<FormItem label="退款单号">
							<Input v-model="queryForm.sn" placeholder="请输入"></Input>
					</FormItem>
					<FormItem label="订单编号">
							<Input v-model="queryForm.orderSn" placeholder="请输入"></Input>
					</FormItem>
					<FormItem label="运单号">
							<Input v-model="queryForm.trackingNo" placeholder="请输入"></Input>
					</FormItem>
					<FormItem label="申请时间">
						<Row>
			                <Col span="11">
			                    <FormItem>
			                        <DatePicker type="date" placeholder="查询开始时间" v-model="queryForm.searchStartTime" @on-change="dateConfirm"></DatePicker>
			                    </FormItem>
			                </Col>
			                <Col span="2" style="text-align: center">-</Col>
			                <Col span="11">
			                    <FormItem>
			                        <DatePicker type="date" placeholder="查询结束时间" v-model="queryForm.searchEndTime" @on-change="dateConfirm"></DatePicker>
			                    </FormItem>
			                </Col>
			            </Row>      
			        </FormItem>
				</Form>
			</div>
			<div slot="list_data">
				<Table border :columns="table.columns" :data="table.data"></Table>
			</div>
		</wsSmPanel>

		<!--审核弹框-->
		<wsModal v-model="auditModal.show" ok-text="审核" title="退款单审核" @on-ok="auditModalOk" @on-cancel="auditModalCancel">
		    <Form ref="auditForm" :model="auditModal.form" :rules="auditModal.validate" :label-width="100">
		        <FormItem label="审核状态" prop="auditStatus">
		            <Select clearable v-model="auditModal.form.auditStatus" placeholder="请选择">
		                <Option value=1>通过</Option>
		                <Option value=2>驳回</Option>
		            </Select>
		        </FormItem>
				<FormItem label="审核意见" prop="auditContent">
		            <Input v-model="auditModal.form.auditContent"></Input>
		        </FormItem>
		    </Form>
		</wsModal>

		<wsModal v-model="logisticModal.show" title="物流信息" :whetherShowCancel="false" :whetherShowOk="false" 
		 @on-ok="logisticModalOk" @on-cancel="logisticModalCancel">
			<Row style="padding-bottom: 10px;">
				<Col span="24" class="layout-content-main" style= "font-size: 15px;">
					<Col span="12">
						<Col span="6">
							运单号:
						</Col>
						<Col>
							{{logisticCode}}
						</Col>	 
					</Col>
				</Col>
			</Row>
			<Row>
				<Col span="24" class="layout-content-main" style= "font-size: 15px;">
					<Steps :current="logisticModal.form.count" :status="logisticModal.form.state" direction="vertical">
				        <Step v-for="trace in logisticModal.form.data" :title="trace.context" :content="trace.time"></Step>
					</Steps>
				</Col>
			</Row>
		</wsModal>
	</wsPage>
</template>

<script>
import Common from '../../../common/common.js';
	export default {
		data() {
			return {
				queryForm: {
					status: '',
					refundType: '',
					searchStartTime: '',
					searchEndTime: '',
					sn: '',
					orderSn: '',
					trackingNo: ''
				},
				table: {
					columns: [{
                        type: 'selection',
                        width: 60,
                        align: 'center',
                        fixed: 'left'
                    },
					{
						title: '用户账号',
						key: 'loginName',
	          align: 'center'
					},
					{
						title: '订单编号',
						key: 'orderSn',
	          align: 'center'
					},
					{
						title: '退款编号',
						key: 'sn',
	          align: 'center'
					},
					{
						title: '运单号',
						key: 'trackingNo',
	          align: 'center'
					},
					{
						title: '支付金额',
						key: 'payAmount',
	          align: 'center'
					},
					{
						title: '退款金额',
						key: 'amount',
	          align: 'center'
					},
					{
						title: '退款类型',
						key: 'refundType',
	          align: 'center',
						render: (h, params) => {
							return h('span',{

							},params.row.refundType == 1?"退款":"退货")
						}
					},
					// {
					// 	title: '退款原因',
					// 	key: 'reason',
	    //       width: 180,
	    //       align: 'center',
					// 	render: (h, params) => {
					// 		return h('span',{

					// 		},this.checkReason(params.row.reason))
					// 	}
					// },
					// {
					// 	title: '买家备注',
					// 	key: 'memo',
	    //       width: 180,
	    //       align: 'center'
					// },
					{
						title: '审核状态',
						key: 'status',
	          align: 'center',
						render: (h, params) => {
							return h('Tag',{
								props: {
                        			type: 'border',
                        			color: params.row.status === 1 ? 'blue' : params.row.status === 2||params.row.status === 4? 'green':'red'
                        		}
							},this.checkStatus(params.row.status))
						}
					},
					// {
					// 	title: '审批意见',
					// 	key: 'auditContent',
	    //       width: 290,
	    //       align: 'center'
					// },
					{
						title: '创建日期',
						key: 'createDate',
	          align: 'center'
					},
					{
						title: '操作',
						width: 150,
						fixed: 'right',
						align: 'center',
						render: (h, params) => {

							let childs_ = [];
							if(params.row.status === 1&&params.row.amount!="0.00") {
								let c2 = h('Button', {
								props: {
                                    type: 'text',
                                    size: 'small'
                                },
								on: {
									click: () => {
										this.auditModal.form.orderRefundId = params.row.id;
										this.auditModal.form.auditStatus = '1';
										this.auditModal.show = true;
									}
								}
							},"审核");
								childs_.push(c2);
							}
							if(params.row.refundType === 2) {
								let c2 = h('Button', {
								props: {
                                    type: 'text',
                                    size: 'small'
                                },
								on: {
									click: () => {
										this.auditModal.form.orderRefundId = params.row.id;
										this.queryLogistic(params.row.trackingNo);
									}
								}
							},"物流跟踪");
								childs_.push(c2);
							}
							let c1 = h('Button', {
								props: {
                                    type: 'text',
                                    size: 'small'
                                },
								on: {
									click: () => {
										this.jumpDetail(params.row.id,params.row.orderId);
									}
								}
							}, '详情');
							childs_.push(c1);
							return h('div', childs_)
						}
					}],

					data: [],
					page: {
						total: 0, //总条数
						pageNum: 1, //当前页
						pageSize: 10 //每页显示条数
					}
				},
				activeIndex: 0,
				//审核弹框
				auditModal: {
					show: false,
					form: {
						orderRefundId: '',
						auditStatus: '',
						auditContent: ''
					},
					validate: {
						auditStatus: [
	                        { required: true, message: '请选择审核状态', trigger: 'blur' }
	                    ],
					}
				},
				clickSave: false,
				//物流跟踪
				logisticModal: {
					show: false,
					form: {
						data: [],
						count: 0 ,
						state: null
					}
				},
				logisticCode: ''
			}
		},
		computed: {

		},
		mounted() {
			this.init();
		},
		methods: {
			/**
			 * 判断审核状态
			 */
			checkStatus(status){
				if(status == 1) return '退款中';
				if(status == 2) return '商家审核通过';
				if(status == 3) return '商家审核失败';
				if(status == 4) return '平台审核通过';
				if(status == 5) return '平台审核失败';
			},
			/**
			* 判断退款原因
			 */
			checkReason(reason){
				if(reason == 1) return '多拍|错拍|不想拍';
				if(reason == 2) return '缺货';
				if(reason == 3) return '质量问题';
			},

			//查询开始时间段必填
			dateConfirm(){
				let searchStartTime = this.queryForm.searchStartTime;
				let searchEndTime = this.queryForm.searchEndTime;
				if (searchStartTime != null ||searchStartTime != '') {
					searchEndTime = new Date();
				} else if (searchEndTime != null || searchEndTime !='') {
					searchStartTime = searchEndTime;
				}
			},

			init() {
				this.clickSave = false;
				this.query();
			},
			//刷新
			refresh(){
				this.queryForm.status = '';
				this.queryForm.refundType = '';
				this.queryForm.searchStartTime = '';
				this.queryForm.searchEndTime = '';
				this.queryForm.sn = '';
				this.queryForm.orderSn = '';
				this.queryForm.nickname = '';
				this.table.page.pageNum = 1;
				this.init();
			},
			queryByStatus(type){
				this.queryForm.status = type;
				this.activeIndex = type;
				if(type == undefined){
					this.activeIndex = 0;
					this.table.page.pageNum = 1;
				}
				if(!isNaN(type)){
				 	this.table.page.pageNum = 1;
				}
				this.query();
			},
			/**
			 * 表单查询
			 */
			query(type) {
				let pageSize = this.table.page.pageSize;
				let pageNum = this.table.page.pageNum;
				const _this = this;
				this.axios.post('/ws/ms/orderRefunds?pageNum=' + pageNum + '&pageSize=' + pageSize, this.queryForm).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						_this.buildPageData(res.data);
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			/**
			 * 构建表格数据
			 */
			buildPageData(data_) {
				this.table.data = data_.list;
				this.table.page.total = data_.total;
			},
			/**
			 * 审核的弹框取消操作
			 */
			auditModalCancel() {
				this.$refs['auditForm'].resetFields();
				this.auditModal.show = false;
				this.clickSave = false;
			},
			/**
			 * 审核的弹框确认操作
			 */
			auditModalOk() {
				this.$refs['auditForm'].validate((valid) => {
					if (valid) {
						this.audit();
			        } else {
			            this.$Message.error('没有选择审核状态!');
			        }
                });
			},

			audit(){
				if(this.clickSave){
					this.$Message.warning('请不要重复点击');
					return;
				}
				this.clickSave = true;
				const _this = this;
				this.axios.put('/ws/ms/refundrecord', _this.auditModal.form).then(response => {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.$Message.success('审核成功');
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('审核失败:' + message_);
					}
					_this.$refs['auditForm'].resetFields();
					_this.auditModal.show = false;
					_this.init();
				});
			},
			/**
			 * 查看详情
			 */
			jumpDetail(id,orderId){
				// this.$router.push('/orderDetail?id='+id);
				// this.$router.push({name:'/orderDetail?id='+id});
				this.$router.push({name:'ms_merchantRefundDetail_list',query:{id:id,orderId:orderId}});
			},

			/**
			 * 查询物流跟踪
			 */
			queryLogistic(trackingNo){
				const _this = this;
    			this.axios.get('/ws/ms/trace/'+trackingNo).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						_this.logisticModal.form = res.data;
						if(res.data == null){
							_this.$Message.warning('无此物流信息');
							return;
						}
						_this.logisticModal.form.data = _this.logisticModal.form.data.reverse();
						_this.logisticModal.form.count = _this.logisticModal.form.data.length - 1;
						_this.changeLogisticStatus( _this.logisticModal.form.state);
						_this.logisticCode = trackingNo;
						_this.logisticModal.show = true;
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			changeLogisticStatus(state){
				if(state == '0' || state == '1' || state == '5'){
					this.logisticModal.form.state = 'process';
				}
				if(state == '3'){
					this.logisticModal.form.state = 'finish';
				}
				if(state == '4' || state == '2' || state == '6'){
					this.logisticModal.form.state = 'error';
				}
			},
			logisticModalOk(){

			},
			logisticModalCancel(){
				this.logisticModal.show = false;
				this.logisticModal.form.data = [];
				this.logisticModal.form.count = 0;
			}
		}
	}
</script>

<style scoped>
	.ws-form-select {
		width: 162px;
	}
</style>
